<template>
    <div>
       <div>
           <header class="header">
            <div class="ceilBox">
                <div class="ceil wrap clearfix">
                   <!--  <div class="tzSlogan">
                        <span>集设网用户交流群 <a href="https://jq.qq.com/?_wv=1027&k=5bQRL7I" target="_blank">644602905</a></span>
                    </div> -->
                    <div class="jsLogo">
                        <router-link to="/">
                        <span class="refIndex"></span>
                        </router-link>
                    </div>
                    <search></search>
                    <div class="headNav">
                        <ul class="navList">
                            <li>
                                <router-link to="/uploadIndex" title="模型上传"><i class="uploadImg"></i> </router-link>
                                <!-- <span @click="loginConfirm('uploadIndex')"><i class="iconfont icon-shangchuan1 uploadImg"></i> 素材上传</span> -->
                            </li>
                            <li>
                                <router-link to="/recharge" target="_blank" title="会员充值"> <i class="moneyCenter"></i></router-link>
                                <!-- <span @click="loginConfirm('Recharge')"> <i class="iconfont icon-huiyuan moneyCenter"></i>充值中心</span> -->
                            </li>
                            <!-- <li>
                                <router-link to="/aboutTz">关于我们</router-link>
                            </li> -->
                        </ul>
                        <login-register></login-register>
                        
                    </div>
                </div>
                </div>
                
        </header>
        <loading loadingStyle="height:500px;" v-if="LoadingShow"></loading>
        <section class="navBox" v-else>
            <div class="nav wrap">
            <nav class="clearfix navInfo">
                <div class="modeSortBox navListBox" @mouseenter="modeListShow('modeSort',$event)" @mouseleave="modeListHide('modeSort',$event)">
                    <div class="modeSort">
                        <router-link :to="{path:'/model',query:{type:1,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">3D模型<i></i></router-link>
                    </div>
                    <drop-down goUrl="/model" type="1" :modeSort="data.modeSort" editStyle="left:0px;top:62px;width: 903px;" modeKey="1" :indexMsg="indexMsg" ></drop-down>
                </div>
                <div class="mode3D navListBox" @mouseenter="modeListShow('definition',$event)" @mouseleave="modeListHide('definition',$event)">
                    <router-link :to="{path:'/works',query:{type:7,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">高清案例<i></i></router-link>
                    <drop-down goUrl="/works" type="7"  :modeSort="data.definition" editStyle="left:-180px;min-height: 236px;width: 470px;top:64px;text-align:left" modeKey="7" :indexMsg="indexMsg"></drop-down>
                </div>
                <div class="home navListBox" @mouseenter="modeListShow('modeSu',$event)" @mouseleave="modeListHide('modeSu',$event)">
                    <router-link :to="{path:'/sumodel',query:{type:2,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">SU模型<i></i></router-link>
                    <drop-down goUrl="/sumodel" type="2" :modeSort="data.modeSu" editStyle="left: -140px;width: 903px;top:64px" modeKey="2" :indexMsg="indexMsg"></drop-down>
                </div>
                
                <div class="vip navListBox" @mouseenter="modeListShow('concept',$event)" @mouseleave="modeListHide('concept',$event)">
                    <router-link :to="{path:'/concept',query:{type:4,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">概念方案<i></i></router-link>
                    <mini-drop goUrl="/concept" type="4" :modeMater="data.concept" editStyle="width: 635px;left: -200px;top:64px" modeKey="4" :indexMsg="indexMsg"></mini-drop>
                </div>
                <div class="navListBox" @mouseenter="modeListShow('constr',$event)" @mouseleave="modeListHide('constr',$event)">
                    <router-link :to="{path:'/cad',query:{type:3,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">施工图<i></i></router-link>  
                    <drop-down goUrl="/cad" type="3"  :modeSort="data.constr" editStyle="left:-180px;min-height: 236px;width: 470px;top:64px;text-align:left" modeKey="3" :indexMsg="indexMsg"></drop-down>
                </div>
                <!-- <div class="navListBox budget" @mouseenter="modeListShow('budget',$event)" @mouseleave="modeListHide('budget',$event)">
                    <router-link to="/budget">预算方案<i></i></router-link>
                    <mini-drop goUrl="budget" :modeMater="data.budget" editStyle="width: 635px;left: -284px;top:64px" modeKey="5" :indexMsg="indexMsg"></mini-drop>
                </div> -->
                <div class="navListBox" @mouseenter="modeListShow('modeMater',$event)" @mouseleave="modeListHide('modeMater',$event)">
                    <router-link :to="{path:'/material',query:{type:6,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">材质贴图<i></i></router-link>
                    <mini-drop goUrl="/material" type="6" :modeMater="data.modeMater" editStyle="width:473px;left:-190px;top:64px" modeKey="6" :indexMsg="indexMsg"></mini-drop>
                </div>
                <div class="navListBox">
                    <router-link to="/recharge">全站VIP<i></i></router-link> 
                </div>
            </nav>
            <search></search>
            <div class="errorBanner wrap">
                <p class="errorMsgRefresh">
                    页面丢失了或网页不存在，请<router-link to="/"> 刷新 </router-link>试试看
                </p>
            </div>
            </div>
        </section>
       </div>
    </div>
</template>
<script>
import router from '../routes.js';
import loading from './loading';
export default {
    name:"ws404",
    data(){
        return{
            msg:"我是404",
            indexMsg:null,
            LoadingShow : true,
            data : {
                modeSort : false,//3D模型
                modeSu:false,//su模型
                modeMater:false,//材质贴图
                concept:false,//概念方案
                constr : false,//施工图
                definition:false,//高清案例
                budget:false,//预算方案
            },
        }
    },
    methods: {
        modeListShow(data,e){//模型鼠标移入事件
            this.data[data] = true;
            var activeA = e.target.getElementsByTagName('a')[0];
            var activeI = e.target.getElementsByTagName('i')[0];
            activeA.style.color = "#ec5b55";
            activeI.style.display= "inline-block";
        },
        modeListHide(data,e){//模型鼠标移出事件
            this.data[data] = false;
            var activeA = e.target.getElementsByTagName('a')[0];
            var activeI = e.target.getElementsByTagName('i')[0];
            activeA.style.color = "";
            activeI.style.display= "none";
        }, 
        /* clickLogo(){
            window.location.reload();
        }, */
    },
    components:{
        loading,
        search : resolve => require(["./search/search"], resolve),//搜索输入框
        dropDown : resolve => require(["./index/dropDown"], resolve),//下拉列表
        miniDrop : resolve => require(["./index/miniDrop"], resolve),//小的下拉
        loginRegister : resolve => require(["./loginRegister"], resolve),//登录注册
    },
    created() {//请求首页数据
        axios.get('/index/getItems').then(response => {
            this.indexMsg = response.data;
            this.LoadingShow = false;
        });
    },
};

window.onload=function(){
    // console.log(router.history.current.matched[0].path)
    if(router.history.current.matched[0].path=="*"||router.history.current.matched[0].path=="/error"){
          if (document.referrer === '') {
            router.push("/")
        }
        history.go(-1); 
    }
   
}
</script>
<style>
    .errorBanner{
        width: 1120px;
        height: 563px;
        background: url(../img/bgi404.png) no-repeat center;
        background-size: contain;
        position:relative;
    }
    .errorMsgRefresh{
        position: absolute;
        width: 100%;
        bottom: 0;
        font-size: 26px;
        line-height: 104px;
        text-align:center;
        color: #c2c2c2;
    }
    .refIndex{
    display:block;
    width: 111px;
    height: 71px;
    margin: 0 auto;
    cursor:pointer;
    background: url(../img/jsLogo.png) no-repeat center;
}
</style>